<!DOCTYPE html>
<html data-sly-use.basePage="base-page-template.js">
<head>
    <meta charset="utf-8">
    <title>${resource.valueMap['jcr:title']}</title>
    <link rel="stylesheet" href="/libs/jslibs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/libs/jslibs/bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/libs/jslibs/bootstrap-switch/3.3.4/css/bootstrap-switch.min.css">
    <link rel="stylesheet" href="/static/clientlibs/tattoo/common/template/base-page-template/css/base-page-template.css">
    <script src="/libs/jslibs/jquery/2.2.4/jquery.min.js"></script>
    <script src="/libs/jslibs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/libs/jslibs/bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script src="/libs/jslibs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
    <script src="/static/clientlibs/tattoo/common/template/base-page-template/js/base-page-template.js"></script>
</head>
<body>
<div class="sling-cms-mode">${basePage.wcmmode}</div>
<div class="header-div">
    <div class="left-area">
        <div class="open-menu" title="Open menu"></div>
        <div class="logo">tattoo</div>
    </div>
    <div class="right-area">
        <div class="current-user">
            <div class="user-name">
                admin
            </div>
            <div class="user-name-dropdown">
                <div class="modify-password">
                    Modify Password
                </div>
                <div class="logout">
                    Logout
                </div>
            </div>
        </div>
    </div>
</div>

<div class="menu-div">
    <div class="menu-item menu-folder access-control">
        <div class="menu-item-label">permission manage</div>
        <div class="children">
            <div class="menu-item menu access-control" uri="/tattoo/group.html">
                <div class="menu-item-label">group</div>
            </div>
            <div class="menu-item menu access-control" uri="/tattoo/microservice.html">
                <div class="menu-item-label">microservice</div>
            </div>
            <div class="menu-item menu access-control" uri="/tattoo/app.html">
                <div class="menu-item-label">app</div>
            </div>
            <div class="menu-item menu access-control" uri="/tattoo/authorize.html">
                <div class="menu-item-label">authorize</div>
            </div>
        </div>
    </div>
    <div class="menu-item menu-folder access-control">
        <div class="menu-item-label">base data manage</div>
        <div class="children">
            <div class="menu-item menu access-control" uri="/tattoo/config.html">
                <div class="menu-item-label">config</div>
            </div>
            <div class="menu-item menu access-control" uri="/tattoo/lookup.html">
                <div class="menu-item-label">lookup</div>
            </div>
            <div class="menu-item menu access-control" uri="/tattoo/message.html">
                <div class="menu-item-label">message</div>
            </div>
        </div>
    </div>
    <div class="menu-item menu-folder access-control">
        <div class="menu-item-label">workflow demo</div>
        <div class="children">
            <div class="menu-item menu access-control" uri="/tattoo/procurement.html">
                <div class="menu-item-label">procurement</div>
            </div>
        </div>
    </div>
</div>

<div class="windows">
    <div class="delete-confirm-window modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="confirm-delete-title">
                        Delete Warning
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="delete-confirm-content">
                    </div>
                    <br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="delete-confirm-btn btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modify-password-window modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modify-password-title">
                        Modify Password
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="modify-password-content form-group">
                        <div class="old-password-element edit-panel-element">
                            <div class="old-password-label edit-element-label required">old password:</div>
                            <div class="input-div">
                                <input name="old-password" type="password" class="old-password-value edit-element-value form-control" maxlength="30"/>
                            </div>
                        </div>
                        <div class="new-password-element edit-panel-element">
                            <div class="new-password-label edit-element-label required">new password:</div>
                            <div class="input-div">
                                <input name="new-password" type="password" class="new-password-value edit-element-value form-control" maxlength="30"/>
                            </div>
                        </div>
                    </div>
                    <br>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="modify-password-confirm-btn btn btn-primary">OK</button>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="front-components">
    <div class="page-div" size="10" show-page-start="-1" show-page-end="-1" total-pages="0">
        <div class="dropdown">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <span class="show-page-size">Per 10</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li size="10">
                    <span>Per 10</span>
                </li>
                <li size="20">
                    <span>Per 20</span>
                </li>
                <li size="50">
                    <span href="#">Per 50</span>
                </li>
            </ul>
        </div>
        <div class="turn-page-wrap">
            <div class="first-page"></div>
            <div class="previous-page"></div>
            <ul class="pagination page-number-wrap">
            </ul>
            <div class="next-page"></div>
            <div class="last-page"></div>
        </div>
        <div class="refresh">
        </div>
    </div>
</div>

<div class="main-content">
    <sly data-sly-resource="${@path='container',resourceType='sling-cms/components/general/container'}"></sly>
</div>
</body>
</html>